import { styled } from '@mui/material/styles';
import { Box, Drawer, ListItemButton, Typography } from '@mui/material';
import { Link } from 'react-router-dom';

const drawerWidth = 240;

export const StyledDrawer = styled(Drawer)({
  width: drawerWidth,
  flexShrink: 0,
  '& .MuiDrawer-paper': {
    width: drawerWidth,
    boxSizing: 'border-box',
    background: 'linear-gradient(180deg, #1a237e 0%, #283593 100%)',
    color: '#fff',
    display: 'flex',
    flexDirection: 'column',
  },
});

export const LogoContainer = styled(Box)({
  padding: '24px 0',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%)',
  borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
});

export const AppTitle = styled(Typography)({
  fontWeight: 'bold',
  color: '#fff',
  textAlign: 'center',
  fontFamily: 'monospace',
  display: 'flex',
  alignItems: 'center',
  gap: '8px',
});

export const AppSubtitle = styled(Typography)({
  color: '#fff',
  opacity: 0.7,
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
  marginTop: '4px',
});

export const NavigationContainer = styled(Box)({
  flex: 1,
  padding: '16px 0',
});

export const NavItem = styled(Link)({
  textDecoration: 'none',
  color: 'inherit',
  display: 'block',
  padding: '0 16px',
});

export const NavButton = styled(ListItemButton)({
  borderRadius: '4px',
  margin: '4px 0',
  '&.Mui-selected': {
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    '&:hover': {
      backgroundColor: 'rgba(255, 255, 255, 0.25)',
    }
  },
  '&:hover': {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
  },
  '& .MuiListItemIcon-root': {
    color: '#fff',
    minWidth: 40,
  },
});

export const LogoutContainer = styled(Box)({
  borderTop: '1px solid rgba(255, 255, 255, 0.1)',
  padding: '16px',
});

export const MainContent = styled(Box)({
  display: 'flex',
  flexGrow: 1,
  height: '100vh',
  overflow: 'hidden',
});

export const PageContent = styled(Box)({
  flexGrow: 1,
  padding: '24px',
  overflow: 'auto',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  '& > *': {
    width: '100%'
  },
});
